$(function () {
    //代表的党派
    var option = {
        grid: {
            top: '8%',
            left: '7%',
            right: '7%',
            bottom: '8%',
            containLabel: true
        },
        title: {
            text: ''
        },
        legend: {
            show: false
        },
        xAxis: {
            type: 'category',
            data: ['中共党员', '群众', '中共预备党员', '其他党派党员'],
            axisLabel: {
                interval: 0,
                rotate: 0,
                fontSize: 10,
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 0.7,
                    color: '#666666'
                }
            },
            axisTick: {
                show: true,
                inside: true,
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            name: '人',
            nameLocation: 'end',
            nameGap: 15,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dotted'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    width: 0.7,
                    color: '#666'
                }
            }
        },
        tooltip: {
            // trigger: 'axis',
            textStyle: {
                align: 'left'
            },
            formatter: '{a0}<br />{b0}: {c0}件'
        },
        series: [{
            name: '党派',
            data: [3529, 951, 64, 1070],
            color: '#187FFF',
            type: 'bar',
            barWidth: 30,//柱图宽度
        }]
    };
    var myChart = echarts.init(document.getElementById("chart"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {//适应div大小
        myChart.resize();
    });
})



$(function () {

    //代表的代表级别
    // Build the chart
    var option1 =  {
        title: {
            show: false
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle:{
                align:'left'
            },
        },
        color:['#1880FE','#FF625B','#9183F5','#FDC401','#0CC4C6',],
        legend: {
            show: true,
            width:300,              // 宽度
            itemGap: 10,            // 间隔
            itemWidth: 10,          // 图形宽度。
            itemHeight: 10,
            bottom: '5%',
            left: 'center',
            // data:[],
            formatter: [
                '{a|{name}}'+'{b|}'
            ].join('\n'),//图例换行对齐
            textStyle: {
                rich: {
                    a: {
                        width: 100,
                        // color: '#909399',
                        fontSize: 12,
                        lineHeight: 12
                    }
                },
            },
        },
        series: [{
            name: '代表级别',
            type: 'pie',
            center: ['35%', '38%'],
            // radius: ['30%', '50%'],
            radius:'40%',
            minAngle: 5,
            width:600,
            selectedMode: 'single',
            avoidLabelOverlap: false,
            label: {
                // normal:{
                //     show:true,
                //     formatter:'{b}\n\n',
                //     padding:[0,-55],
                //     alignTo:'labelLine'
                // },
                normal:{
                    show:true,
                    textStyle: {
                        // color: 'white',  // 改变标示文字的颜色
                        fontSize:10,//文字大小
                    },
                    minMargin: 5,
                    formatter: '{b}\n\n',
                    // borderWidth: 20,
                    // borderRadius: 4,
                    padding: [0, -70],
                    alignTo: 'labelLine',
                },

            },
            emphasis: {
                label: {
                    show: true,
                }
            },
            labelLine: {
                    show: true,
                    length:30,
                    length2:80,
                    smooth:false,
                    minTurnAngle:90,
                    maxSurfaceAngle:90

            },
            // labelLayout: {
            //     moveOverlap:'shiftX'
            // },
            labelLayout: function (params) {//文字写在线上
                var isLeft = params.labelRect.x < myChart1.getWidth() / 2;
                var points = params.labelLinePoints;
                // Update the end point.
                points[2][0] = isLeft
                    ? params.labelRect.x
                    : params.labelRect.x + params.labelRect.width;

                return {
                    labelLinePoints: points
                };
            },
            data: [{
                name: '国家级人大代表',
                value: 5,
                selected: true
            },{
                name: '省级人大代表',
                value: 613
            }, {
                name: '市级人大代表',
                value: 389
            },  {
                name: '县级人大代表',
                value: 1543
            }, {
                name: '镇级人大代表',
                value: 3063
            }]
        }]
    };

    var myChart1 = echarts.init(document.getElementById("chart2"));
    myChart1.setOption(option1);
    window.addEventListener("resize",function(){//适应div大小
        myChart1.resize();
    });
})